<template>
	<view v-show="types" style="background-color: #ffffff;min-height: 800px;">
		<view style="width: 130px;height: 130px;border: 3px solid #3c77b7;overflow: hidden;margin: 10px auto;border-radius: 10px;">
			<image  style="display: block;width: 100%;height: 100%;" :src="uinfo.avatarUrl"></image>
		</view>
		<view class="item1">
			<view  class="item2">手机号：{{uinfo.phone}}</view>
			<view  class="item2">角色：值班主任</view>
		</view>
		<view v-show="czhitype" class="ck" style="border: 1px solid #55aaff;">
			<view class="item3">洗车费充值(微信支付)</view>
			<view class="item4">
				<view>车牌：</view>
				<view><input style="height: 40px;border-bottom: 3px solid #3c77b7;" type="text" v-model="cpnames"/></view>
				<view @click="seachcp()" style="background-color: #3c77b7;color: #ffffff;font-weight: 600;border-radius: 10px;font-size: 16px;width: 60px;text-align: center;margin-left: 10px;">查询</view>
			</view>
			<view style="overflow: auto;height: 300px;">
					<view class="item6" @click="addczxz(item)" :class="{'itv1':cur1==item.id}"  v-for="(item, index) in items" :key="item.id">
							{{item.name}}/{{item.value}}次
					</view>
			</view>
			<view @click="czxcf" class="cz">充值</view>
			<view @click="gbczhi" class="gb">关闭</view>
		</view>
		
		<view v-show="cxtype" class="ck" style="border: 1px solid #55aaff;">
			<view class="item3">洗车次数查询</view>
			<view style="border: 2px solid #3c77b7;width: 80%;height: 160px;margin: 0 auto;margin-top: 10px;margin-bottom: 10px;">
				<view style="height:40px;overflow: hidden;">
					<view class="items1">车牌：</view>
					<view class="items1" @click="getcp()">点击选择车牌</view>
				</view>
				<view style="height:40px;overflow: hidden;">
					<view class="items1">所属车队：</view>
					<view class="items1">{{cpxxinfo.char7}}</view>
				</view>
				<view style="height:40px;overflow: hidden;">
					<view class="items1">剩余次数：</view>
					<view class="items1">{{cpxxinfo.xcnum}}</view>
				</view>
				<view style="height:40px;overflow: hidden;">
					<view class="items1">充值时间：</view>
					<view class="items1">{{cpxxinfo.cztimes}}</view>
				</view>
			</view>
				<view @click="gbcx" class="gb">关闭</view>
		</view>
		
		
		
		<view  v-show="cptypeor" class="ck" style="border: 1px solid #55aaff;">
			<view class="item3">车牌查询</view>
			<view class="item4">
				<view>车牌：</view>
				<view><input style="height: 40px;border-bottom: 3px solid #3c77b7;" type="text" v-model="cpnames"/></view>
				<view style="background-color: #3c77b7;color: #ffffff;font-weight: 600;border-radius: 10px;font-size: 16px;width: 60px;text-align: center;margin-left: 10px;">查询</view>
			</view>
			<view style="overflow: auto;height: 300px;">
					<view class="item6" @click="addcpxz(item)" :class="{'itv1':cur2==item.id}"  v-for="(item, index) in items4" :key="item.id">
							{{item.char1}}
					</view>
			</view>
			
			<view @click="qrcp" class="cz">确认选择</view>
			<view @click="gbcp" class="gb">关闭</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"zbzrgrzx",
		props: {
			types: {
				type: Boolean,
				default: false,
				required: true
			}
		},
		data() {
			return {
				uinfo:'',
				czhitype:false,
				items: [{
						id:1,
						value: '1',
						name: '5元',
						
					},
					{
						id:2,
						value: '4',
						name: '20元'
					},
					{
						id:3,
						value: '12',
						name: '50元'
					},
					{
						id:4,
						value: '25',
						name: '100元'
					},
					{
						id:5,
						value: '50',
						name: '200元'
					},
					{
						id:6,
						value: '120',
						name: '500元'
					},
				],
				cur1:'',
				cur2:'',
				czxzinfo:'',
				cxtype:false,
				items4:[],
				cpnames:'',
				cptypeor:false,
				cpxxinfo:'',
			};
		},
		created(){
				this.getuserinfo(); 
		},
		methods: {
			qrcp(){
				this.cptypeor = false
			
			},
			getcp(){
				this.cptypeor = true
			},
			gbcp(){
					this.cptypeor = false
			},
			addcpxz(e){
					this.cur2 = e.id
					this.cpxxinfo = e
			},
			getcx(){
					this.cxtype = true
			},
			gbcx(){
					this.cxtype = false
			},
			czhi(){
					this.czhitype = true
			},
			gbczhi(){
					this.czhitype =false
			},
			addczxz(e){
				this.cur1 = e.id
				this.czxzinfo = e
			},
			async getuserinfo(){
				let data = {
					id:uni.getStorageSync('uid'),
				}
				let res =  await this.$api.getuserinfo(data)
				console.log(res.data.code)
				if(res.data.code==0){
					this.uinfo = res.data.data
					uni.setStorageSync('uid', res.data.data.id);
					uni.setStorageSync('cdtype', res.data.data.cdtype);	
					this.getcpcdlist();
				}			
			},
			//获取当前车队的车牌
			async seachcp() {
				let cpnames = this.cpnames
				let data = {
					cdid: this.uinfo.cdid,
					cpnames: cpnames
				}
				let res = await this.$api.getcpcdlist(data)
				if (res.data.code == 0) {
					this.items4 = res.data.data
				}
			},
			async getcpcdlist() {
				let cpnames = this.cpnames
				let data = {
					cdid: this.uinfo.cdid,
				}
				let res = await this.$api.getcpcdlist(data)
				if (res.data.code == 0) {
					this.items4 = res.data.data
				}
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.itvs{
		float: left;
		height: 70px;
		width: 48%;
		margin-left: 5px;
		border:3px solid #3c77b7;
		margin-top: 5px;
		margin-bottom: 5px;
		line-height: 70px;
		text-align: center;
		font-size: 20px;
		background-color: #3c77b7;
		color: #ffffff;
		border-radius: 10px;
	}
	.loginout{
		border:3px solid #3c77b7;
		color: #ffffff;
		border-radius: 10px;
		margin: 10px auto;
		font-size: 20px;
		height: 60px;
		line-height: 60px;
		width: 80%;
		background-color: #3c77b7;
		text-align: center;
	}
	.item1{
		border: 3px solid #3c77b7;
		overflow: hidden;
		margin: 10px auto;
		border-radius: 10px;
		width: 90%;
	}
	.item2{
		height: 50px;
		padding-left: 10px;
		line-height: 50px;
		font-size: 20px;
	}
	.ck{
		z-index:999;
		-moz-opacity:1;
		opacity: 1;
		position: fixed;
		background-color: #ffffff;
		width: 90%;
		border-radius: 5px;
		left: 50%;
		top: 45%;
		transform: translate(-50%, -50%);
	}
	.item3{
		background-color: #3c77b7;
		color: #ffffff;
		font-size: 20px;
		font-weight: 600;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}
	.item4{
		height: 50px;
		overflow: hidden;
	}
	.item4 view{
		height: 40px;
		line-height: 40px;
		float: left;
		font-size: 20px;
		padding-left: 5px;
		margin-top: 5px;
	}
	.item5{
		
	}
	.item6{
		border: 3px solid #3c77b7;
		height: 50px;
		width: 46%;
		margin-left: 5px;
		font-size: 20px;
		text-align: center;
		line-height: 50px;
		float: left;
		border-radius: 10px;
		margin-top: 10px;
	}
	.itv1{
		background-color: #3c77b7;
		color: #ffffff;
	}
	.cz{
		background-color: #3c77b7;
		font-size: 20px;
		font-weight: 600;
		color: #ffffff;
		text-align: center;
		line-height: 40px;
		height: 40px;
	}
	.gb{
		background-color: red;
		font-size: 20px;
		font-weight: 600;
		color: #ffffff;
		text-align: center;
		line-height: 40px;
		height: 40px;
		
	}
	.items1{
		height:40px;
		line-height:40px;
		border:1px solid #3c77b7;
		float: left;width: 50%;
		text-align: center;
		font-size: 20px;
	}
	.itv1{
		background-color: #3c77b7;
		color: #ffffff;
	}
</style>